<template>
  {{ userInfo }}
  <div class="box">
    <el-form
      ref="ruleFormRef"

      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      :size="formSize"
      status-icon
    >
      <el-form-item label="登录名" prop="Name">
        <el-input v-model="ruleForm.Name" />
      </el-form-item>
      <el-form-item label="昵称" prop="nick">
        <el-input v-model="ruleForm.nick" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定修改
        </el-button>
      </el-form-item>
    </el-form>

    <hr>
    <el-form
      ref="ruleFormRef2"

      :model="ruleForm2"
      :rules="rules2"
      label-width="auto"
      :size="formSize"
      status-icon
    >
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="ruleForm2.oldPassword" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="ruleForm2.newPassword" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm2(ruleFormRef2)">
          确定修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script  setup>
import { onMounted, ref, reactive,computed } from "vue";
import axios from "../../ajax";
import md5 from "md5";

const formSize = ref("default");
const ruleFormRef = ref(); // 表单id

let ruleForm = reactive({
  Name: "",
  nick: "",
});
const rules = reactive({
  Name: [{ required: true, message: "登录名不能为空", trigger: "blur" }],
  nick: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
});

onMounted(() => {
  // getdata();
});

import {userStore} from "../../stores/user"
let user_store=userStore();

let userInfo=computed(()=>user_store.userInfo)

ruleForm.Name=userInfo.value.loginUserName;
ruleForm.nick=userInfo.value.nickName
// let getdata = async () => {
//   let { loginUserName, nickName } = await axios.get("/adminUser/profile");
//   console.log(loginUserName, nickName);
//   ruleForm.Name = loginUserName;
//   ruleForm.nick = nickName;
// };
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      putUserName();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const putUserName = async () => {
  let res = await axios.put("/adminUser/name", {
    loginUserName: ruleForm.Name,
    nickName: ruleForm.nick,
  });
};

// 第二个表单************************************************************************************

const ruleFormRef2 = ref(); // 表单id

let ruleForm2 = reactive({
  oldPassword: "",
  newPassword: "",
});
const rules2 = reactive({
  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
});


const submitForm2 = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {// ajax请求
      editorPassword()
    } else {
      console.log("error submit!", fields);
    }
  });
};
const  editorPassword=async ()=>{
   let res=await axios.put("/adminUser/password",{
    newPassword:md5(ruleForm2.newPassword),
    originalPassword:md5(ruleForm2.oldPassword)
   })
}


</script>






  <style>
.box {
  box-shadow: 0 0 10px #dbdada;
  padding: 20px;
}
</style>